<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="$router.push({name:'menu-create'})">添加菜单</el-button>
      </div>
    </el-card>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="菜单名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="interfaceUrl"
          label="接口路径" align="center">
      </el-table-column>
      <el-table-column
          prop="type"
          label="菜单类型">
      </el-table-column>
      <el-table-column
          prop="parentId"
          label="级别">
      </el-table-column>
      <el-table-column
          prop="icon"
          label="图标">
      </el-table-column>
      <el-table-column
          prop="perms"
          label="权限标识符">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="发布时间">
      </el-table-column>
      <el-table-column
          prop=""
          label="操作">
        <!--  template解析会看不见的 -->
        <!--  v-slot="scoped代表表格每行遍历的数据-->
        <template v-slot="scoped">
          <!-- params斜杠数据,和路由搭配使用-->
          <el-button size="mini" @click="$router.push({name:'menu-edit',params:{id:scoped.row.id}})">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scoped.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//1.导入获取菜单的函数
import {deleteMenu, getAllMenus} from "@/api/menu/menu.js";


export default {
  name: "MenuIndex",
  data() {
    return {
      tableData: [],
      xMenuPageBo: {
        name: '',
        startTime: null,
        endTime: null,
        pageSize: 1,
        pageNum: 10
      },
    }
  },
  created() {
    this.loadMenus()
  },
  methods: {
    loadMenus() {
      //debugger
      getAllMenus(this.xMenuPageBo).then((res) => {
        //debugger
        console.log("rows 菜单分页:::::", res.data.data.rows);
        this.tableData = res.data.data.rows
        console.log(this.tableData);
        console.log(res);
      }).catch((error) => {
        throw new Error(error)
      })
    },
    handleDelete(menuId) {
      //debugger
      console.log("menuId", menuId);
      //console.log(deleteMenu);
      this.$confirm('确认要删除菜单吗？', '删除提示').then(
          () => {
            //如果点确认,执行这里
            deleteMenu(menuId).then((res) => {
              console.log("删除菜单", res);
              if (res.code === 200) {
                // console.log(res);
                this.$message.success('删除菜单成功。。。')
                this.loadMenus()
              } else {
                this.$message.error('删除菜单失败。。。')
              }
            })
          }
      ).catch((error) => {
        console.log(error);
        //如果点取消,执行这里
        this.$message.info('取消了删除菜单的操作.....')
      })
    }
  }
}
</script>


<style scoped>

</style>
